<template>
	<view>
		<view class="solids video" v-if="addVisiable" @tap="chooseVideo">
			<view>
				<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
			</view>
			<view>
				<text>点我上传需要修改MD5的文件</text>
			</view>
		</view>
		<view v-if="visiable">
			<video class="video-play" v-bind:src="videoUrl"/>
		</view>
		<view v-if="visiable">
			<view class="cu-form-group">
				<view class="title">视频大小:{{size}}M</view>
			</view>
			<view class="cu-form-group">
				<view class="title">视频长度:{{length}}秒</view>
			</view>
			<view class="cu-form-group">
				<view class="title">新MD5:{{newMd5}}</view>
			</view>
			<view class="box">
				<view class="cu-bar btn-group">
					<button class="cu-btn bg-orange shadow-blur" @click="clear()">清除</button>
					<button class="cu-btn bg-green  shadow" @click="save()">保存到手机</button>
				</view>
			</view>
		</view>
		<view class="water-teach">
			<view class="tui-nickname" @click="skipToWeb">
				<image src="../../static/teach.png" class="tui-img-vip"></image>什么是MD5 为什么要修改MD5
			</view>
		</view>
		<ad :unit-id="ad" v-if="showAd && userType != 1" ad-type="video" ad-theme="white"></ad>
		<ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visiable:false,
				videoUrl:'',
				addVisiable:true,
				size:0,
				length:'15秒',
				newMd5:'singsdasfh34fdsfddsf3',
				showAd:false,
				userType:getApp().globalData.userType,
				ad:getApp().globalData.md5Ad
			}
		},
		onLoad() {
			this.showAd = true
		},
		methods: {
			skipToWeb:function() {
				uni.navigateTo({
					url:'../parse/parse?conId=17'
				})
			},
			chooseVideo() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['album'],
					success: function (res) {
						that.videoUrl = res.tempFilePath
						that.size = (res.size / (1024 * 1024)).toFixed(2);
						that.length = res.duration
						that.visiable = true;
						that.addVisiable = false;
						that.newMd5 = that.randomString(28)
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			randomString(len) {
			　　len = len || 32;
			　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
			　　var maxPos = $chars.length;
			　　var pwd = '';
			　　for (var i = 0; i < len; i++) {
			　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
			　　}
			　　return pwd;
			},
			clear() {
				this.visiable = false;
				this.addVisiable = true;
			},
			save() {
				var that = this;
				if(this.size > 10) {
					uni.showModal({
						content:'视频超过10M，无法保存'
					})
					return
				}
				uni.saveFile({
				      tempFilePath: that.videoUrl,
				      success: function (res) {
						  uni.saveVideoToPhotosAlbum({
						  	filePath: res.savedFilePath,
							success(res) {
								uni.showModal({
									content:'已经保存到手机'
								})
							},
							fail(res) {
								uni.showModal({
									content:'出现错误 暂时无法保存'
								})
							}});
				      },
					  fail(res) {
						  console.log(res)
					  	uni.showModal({
					  		content:'出现错误 暂时无法保存'
					  	})
					  }
				});
			}
		}
	}
</script>

<style>
	.video {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200px;
		background: white;
	}
	
	.video-play {
		width: 100%;
		height: 240px;
	}
	
	.water-teach {
		text-align: center;
		margin-top: 10upx;
	}
	
	.tui-nickname {
		font-size: 30rpx;
		font-weight: 500;
		color: #13227a;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration:underline
	}
	
	.tui-img-vip {
		width: 60rpx;
		height: 30rpx;
		margin-right: 18rpx;
	} 
	
</style>
